import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hixing_app/const/color_res.dart';
import 'package:hixing_app/const/gaps.dart';
import 'package:hixing_app/widgets/list_expand.dart';
import 'package:hixing_app/widgets/search_input/search_input.dart';

class TestMaterial extends StatefulWidget {
  @override
  _TestMaterialState createState() => _TestMaterialState();
}

class _TestMaterialState extends State<TestMaterial> {
  final TextEditingController _searchCtrl = TextEditingController();
  final List<String> navList = [
    "本地",
    "节日",
    "动物",
    "svg",
    "Gcode",
    "字符",
    "图形",
    "植物",
    "自定义",
  ];

  int currentIndex = 0;
  bool isShowType = true;

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _searchCtrl.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListExpand(
      expandSize: 30,
      onExpand: () {
        setState(() {
          isShowType = true;
        });
      },
      onSystole: () {
        setState(() {
          isShowType = false;
        });
      },
      child: Scaffold(
        backgroundColor: ColorRes.bgColor,
        appBar: AppBar(
          title: Text('我的素材'),
          // 滚动自动加上阴影，去掉
          scrolledUnderElevation: 0,
          backgroundColor: ColorRes.bgColor,
          elevation: 0,
        ),
        body: SafeArea(
          child: Column(
            children: [
              Container(
                child: SearchInput(
                  controller: _searchCtrl,
                  height: 40,
                ),
              ),
              _buildNavList(),
              _buildDataList(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildNavList() {
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 400),
      child: !isShowType
          ? const SizedBox.shrink()
          : Container(
              padding: EdgeInsets.only(left: 20.w, top: 10.w),
              width: double.infinity,
              child: Wrap(
                crossAxisAlignment: WrapCrossAlignment.start,
                spacing: 10.w,
                runSpacing: 10.w,
                children: List.generate(
                    navList.length,
                    (index) => Container(
                          decoration: BoxDecoration(
                              color: ColorRes.greyCE,
                              border: Border.all(
                                color: currentIndex == index
                                    ? ColorRes.successGreen
                                    : ColorRes.greyCE,
                              ),
                              borderRadius: BorderRadius.circular(20)),
                          padding: EdgeInsets.symmetric(
                              horizontal: 10.w, vertical: 4),
                          child: Text(
                            navList[index],
                            style: TextStyle(
                              color: currentIndex == index
                                  ? ColorRes.successGreen
                                  : Colors.black,
                              fontSize: 14,
                            ),
                          ),
                        )).toList(),
              )),
    );
  }

  Widget _buildDataList() {
    return Expanded(
        child: Container(
      margin: EdgeInsets.only(top: 10.w),
      child: GridView.builder(
          gridDelegate: gridDelegate(),
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          itemBuilder: (ctx, index) {
            return Container(
              width: 200.w,
              color: Colors.blueGrey,
            );
          }),
    ));
  }

  sliverDelegate() {
    return SliverChildBuilderDelegate((BuildContext context, int index) {
      return Container();
    }, childCount: 30);
  }

  gridDelegate() {
    return SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10,
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        mainAxisExtent: 110.w);
  }
}
